<template>
	<view class="details">
		<view class="details-box" v-if="detailsData.goods_price">
			<!-- 轮播图区域 -->
			<swiper class="details-swiper" indicator-dots autoplay interval=3000>
				<swiper-item class="details-swiper-item" v-for="(item,index) in detailsData.pics" :key="index"
					@click="showImage(item.pics_big)">
					<image :src="item.pics_big"></image>
				</swiper-item>
			</swiper>
      
      <!-- 弹窗内容 -->
    <uni-popup ref="popup" background-color="#fff" @change="change" :mask-click="false">
    	<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <!-- 商品图片和名称 -->
        <view class="popup-top">
          <view class="popup-top-left">
            
          </view>
          <view class="popup-top-right">
            <text class="text-hidden">{{detailsData.goods_name}}</text>
          </view>
          <view class="popup-right-buttom">
            <text>￥{{detailsData.goods_price | formatPrice}}</text>
          </view>
        </view>
        <!-- 数字输入框 -->
        <view class="popup-center">
          <view class="popup-center-left">
            <text>数量选择</text>
          </view>
          <view class="popup-center-right">
            <uni-number-box @change="changeValue" />
          </view>
        </view>
        <!-- 规格选择 -->
        <view class="popup-one">
          <view class="popup-one-left">
            <text>规格选择</text>
          </view>
          <view class="popup-one-right">
            <view @click="dropShow=true" class="">
              1码
              <uni-icons type="bottom" size="30"></uni-icons>
            </view>
            <view class="drop-list" v-if="dropShow">
              <view v-for="(item,index) in 4" class="drop-index">
                {index}码
              </view>
            </view>
          </view>
        </view>
		<!-- 确定取消 -->
		<view class="popup-bottom">
		    <button @click="close()" class="popup-bottom-left">取消</button>
		    <button class="popup-center-bottom">确定</button>
		</view>
<!--        <button @click="close">x</button> -->
          </view>
    </uni-popup>
      
			<!-- 商品描述区域 -->
			<view class="product-data-box">
				<view class="product-price">
					<text>￥{{detailsData.goods_price | formatPrice}}</text>
				</view>
				<view class="product-describe">
					<view class="product-text">
						<text>{{detailsData.goods_name}}</text>
					</view>
					<view class="product-collect">
						<uni-icons type="star" size="20" color="gray" />
						<text>收藏</text>
					</view>
				</view>
				<view class="product-freight">
					<text>快递：免运费</text>
				</view>
			</view>
			<!-- 商品详细参数区域 -->
			<view class="product-introduces">
				<rich-text :nodes="detailsData.goods_introduce"></rich-text>
			</view>
		</view>
		<!-- 商品导航区域 -->
		<view class="details-goods-nav">
			<uni-goods-nav @confirm="dialogInputConfirm" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="toggle('center')" />
		</view>
	</view>
</template>

<script>
	import { mapMutations,mapGetters } from 'vuex'
	export default {
		data() {
			return {
        // 弹窗显示隐藏
        show: false,
        // 弹窗下拉框的显示隐藏
        dropShow:false,
        // 弹窗数字选择器
        numberValue: 0,
				// 详情页数据
				detailsData: {},
				// 商品导航
				options: [{
					icon: 'shop',
					text: '店铺',
					infoBackgroundColor: '#007aff'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
    onReady() {},
		onLoad(options) {
			// 获取详情页数据
			this.getDetailsList(options.goods_id);
		},
		methods: {
			// 获取详情页数据
			async getDetailsList(goods_id) {
				const {
					data: res
				} = await uni.$http.get("/api/public/v1/goods/detail", {
					goods_id
				})
				if (res.meta.status !== 200) return uni.$showToast();
				// 格式化富文本图片格式
				res.message["goods_introduce"] = res.message["goods_introduce"].replace(/<img /g,
					'<img style="display:block; "').replace(/.webp/g, ".png");
				this.detailsData = res.message;
			},
			
			// 预览图片
			showImage(currentUrl) {
				const imgArr = this.detailsData.pics.map((item) => {
					return item.pics_big
				});
				uni.previewImage({
					current: currentUrl,
					urls: imgArr
				})
			},
			
			// 向cart_module添加商品信息
			...mapMutations('m_cart',['addGoodsToCart']),
			
			// 商品导航左侧点击事件
			onClick(e) {
				if(e.content.text == "购物车"){
					uni.switchTab({
						url:'../../pages/cart/cart'
					})
				}
			},
			
			// 商品导航右侧点击事件
			buttonClick(e) {
				if(e.content.text == "加入购物车"){
					// 商品对象
					const goods = {
						goods_id: this.detailsData.goods_id,
						goods_name: this.detailsData.goods_name,
						goods_price: this.detailsData.goods_price,
						goods_number: 1,
						goods_small_logo: this.detailsData.goods_small_logo,
						goods_state: true
					}
					// 向cart_module中添加商品信息
					this.addGoodsToCart(goods);
				}
			},
      // 弹窗
      change(e) {
      	this.show = e.show
      },
      // 关闭弹窗
      close() {
      	this.$refs.popup.close()
      },
      toggle(type) {
      	this.type = type
      	// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      	this.$refs.popup.open(type)
      },
      // 弹窗数字选择器
      change(value) {
      	this.numberValue = value
      },
      changeValue(value) {
      	console.log('返回数值：', value);
      },
		},
		computed:{
			// 购物车商品总数
			...mapGetters('m_cart',['total'])
			
		},
		watch:{
			// 监视total的值，同时给设置购物车的数字徽标
			total:{
				immediate:true,
				handler(newVal){
					this.options[1].info = newVal;
				}
			}
		},
		filters: {
			// 格式化价格样式
			formatPrice(price) {
				return Number(price).toFixed(2);
			}
		},
	}
</script>

<style lang="scss">
  .text-hidden {
    // 文字长度超出限定宽度，则隐藏超出的内容
    overflow: hidden; 
    // 设置文字在一行显示，不能换行
    white-space: nowrap;
    // 规定当文本溢出时，显示省略符号来代表被修剪的文本
    text-overflow: ellipsis;
  }
	.details {
		.details-box {

			// 轮播图区域
			.details-swiper {
				height: 750rpx;
				width: 100%;

				.details-swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		// 商品描述区域
		.product-data-box {
			width: 100%;
			padding: 0 5px;
			box-sizing: border-box;
			margin: 15px 0;

			.product-price {
				font-size: 40rpx;
				color: #c00000;
			}

			.product-describe {
				display: flex;
				margin: 15px 0;

				.product-text {
					font-size: 28rpx;
					border-right: 1px solid #efefef;
					padding-right: 5px;
				}

				.product-collect {
					width: 200px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: gray;
				}

			}

			.product-freight {
				font-size: 26rpx;
				color: gray;
			}
		}
		// 商品导航区域
		.details-goods-nav {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding-top: 50px;
		}
    // 弹窗
    @mixin flex {
    	/* #ifndef APP-NVUE */
    	display: flex;
    	/* #endif */
    	flex-direction: row;
    }
        
    @mixin height {
    	/* #ifndef APP-NVUE */
    	height: 100%;
    	/* #endif */
    	/* #ifdef APP-NVUE */
    	flex: 1;
    	/* #endif */
    }
    .popup-content {
    	@include flex;
      position: relative;
    	align-items: center;
    	justify-content: center;
    	padding: 15px;
    	height: 240upx;
      width: 580upx;
    	background-color: #fff;
      // 商品图片和名称
      .popup-top {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        height: 80upx;
        width: 540upx;
        .popup-top-left {
          height: 80upx;
          width: 200upx;
          background-color: #c00000;
        }
        .popup-top-right {
          height: 120upx;
          width: 300upx;
        }
        .popup-right-buttom {
          position: absolute;
          top: 50upx;
          left: 250upx;
        }
      }
      // 商品数量选择
      .popup-center {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 180upx;
        left: 0;
        height: 40upx;
        width: 540upx;
        .popup-center-left {
          height: 40upx;
          width: 200upx;
        }
        .popup-center-right {
          height: 40upx;
          width: 200upx;
        }
      }
      // 规格选择
      .popup-one {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 100upx;
        left: 0;
        height: 40upx;
        width: 540upx;
        .popup-one-left {
          height: 40upx;
          width: 200upx;
        }
        .popup-one-right {
          height: 40upx;
          width: 200upx;
          position: relative;
          .drop-list {
            position: absolute;
            width: 300upx;
            top: 60upx;
            right: 0;
            padding: 20upx;
            z-index: 10;
            view:hover{
              background-color: #e6e6e6;
            }
          }
        }
      }
	  // 确定&取消
	  .popup-bottom {
	    display: flex;
	    justify-content: space-between;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    height: 60upx;
	    width: 580upx;
	    .popup-bottom-left {
	      height: 60upx;
	      width: 270upx;
		  background-color: red;
		  text-align: center;
	    }
	    .popup-bottom-right {
	      height: 60upx;
	      width: 270upx;
		  background-color: yellow;
		  line-height: 60upx;
	    }
	  }
    }
        
    .popup-height {
    	@include height;
    	width: 200px;
    }
	}
</style>
